<template>
    <!-- 风险清单 -->
    <div class="riskMonitoring">
        <ul class="header">
            <!-- <li @click="$router.push('./riskInventory')">风险清单</li> -->
            <li @click="go1">风险清单</li>
            <li class="currentLi">风险监控</li>
            <li @click="go3">风险统计</li>
            <!-- <li  @click="$router.push('./riskInfo')">风险统计</li> -->
        </ul>
        <div class="queryDiv">
            <div class="queryDiv_top">
                <ul class="ul11">
                    <li class="clearfix">
                        <span class="spa">单位名称</span>
                        <em @click="companyPropShow = true"
                            v-if="!name12">默认本单位
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="companyPropShow = true"
                            v-else>{{name12}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">时间</span>
                        <datetime v-model="parmas.data.Date"
                                  @on-change="change1"
                                  format="YYYY-MM"></datetime>
                        <x-icon type="ios-arrow-right"
                                size="20"></x-icon>
                    </li>
                    <li class="clearfix">
                        <span class="spa">监控状态</span>
                        <em @click="show=true"
                            v-if="!name2">默认本单位
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="show=true"
                            v-else>{{name2}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                </ul>
                <div class="queryBtn"
                     @click="query">查询</div>
            </div>
        </div>
        <h2>总数: {{total}}</h2>
        <ul class="destail"
            v-if="nodata">
            <li v-for="(item,index) in listArr"
                :key="index"
                @click="routerGo(item)">
                <p>{{item.Hazards}} </p>
                <em v-if="item.IsConTrolled=='待监控'"
                    class="hui">{{item.IsConTrolled}}</em>
                <em v-if="item.IsConTrolled=='不受控'"
                    class="red">{{item.IsConTrolled}}</em>
                <em v-if="item.IsConTrolled=='受控'"
                    class="green">{{item.IsConTrolled}}</em>
                <x-icon type="ios-arrow-right"
                        size=""
                        class="icon-white"></x-icon>
            </li>
        </ul>
        <!-- <p v-if="!nodata" class="noDestail">暂无数据...</p> -->
        <noData v-if="listArr == 0"></noData>
        <actionsheet v-model="show"
                     :menus="menu7"
                     @on-click-menu="click">
        </actionsheet>
        <myMenu @clickBack="back"></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"></companyProp>
    </div>
</template>
<script>
import { Datetime, Actionsheet } from 'vux'
import companyProp from '@/commonComponents/companyProp'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        Actionsheet,
        Datetime,
        myMenu,
        companyProp
    },
    data () {
        return {
            show: false,
            name12: '',
            name2: '',
            menu7: {
                menu0: '全部',
                menu1: '不受控',
                menu2: '待监控',
                menu3: '受控'
            },
            parmas: {
                allowPaging: 'false',
                business: 'GetRiskDynamicManagementList',
                data: {
                    departId: '',
                    Date: '',
                    ConTrolledId: ''
                },
                pageIndex: 0,
                pageSize: 20000,
                tokenId: '',
                userId: ''
            },
            listArr: [],
            total: 0,
            nodata: true,
            companyPropShow: false
        }
    },
    created () {
        var day2 = new Date()
        day2.setTime(day2.getTime())
        var m = day2.getMonth() + 1 < 10 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1
        this.parmas.data.Date = day2.getFullYear() + '-' + m
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        this.name12 = token.deptname
        this.parmas.data.departId = token.deptid
        this.dataArr()
    },
    mounted () {
        // if (window.sessionStorage.getItem('name1')) {
        //     this.name12 = window.sessionStorage.getItem('name1')
        //     this.parmas.data.departId = window.sessionStorage.getItem('departId')
        // } else {

        // }
        // if (window.sessionStorage.getItem('name2')) {
        //     this.name2 = window.sessionStorage.getItem('name2')
        //     if (window.sessionStorage.getItem('name2') == '全部') {
        //         this.parmas.data.ConTrolledId = ''
        //     } else {
        //         this.parmas.data.ConTrolledId = window.sessionStorage.getItem('name2')
        //     }
        // } else {
        //     this.name2 = '全部'
        //     this.parmas.data.ConTrolledId = ''
        // }
    },
    methods: {
        back () {
            // this.$router.push('./safeCheck')
        },
        routerGo (item) {
            console.log(item, 11)
            window.sessionStorage.setItem('arr', JSON.stringify(item))
            this.$router.push({ path: './desMonitoring' })
        },
        click (key, item) {
            if (item == '全部') {
                this.parmas.data.ConTrolledId = ''
            }
            if (item == '不受控') {
                this.parmas.data.ConTrolledId = 0
            }
            if (item == '受控') {
                this.parmas.data.ConTrolledId = 1
            }
            if (item == '待监控') {
                this.parmas.data.ConTrolledId = -1
            }
            this.name2 = item
            window.sessionStorage.setItem('name2', item)
        },
        query () {
            this.dataArr()
        },
        go1 () {
            this.$router.push('./riskInventory')
            window.sessionStorage.clear()
        },
        go3 () {
            this.$router.push('./riskInfo')
            window.sessionStorage.clear()
        },
        change1 (value) {
            window.sessionStorage.setItem('time', value)
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then((res) => {
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.total = res.data.count
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                }
            }
            )
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.name12 = item.Name
            this.parmas.data.departId = item.Id
        }
    }
}
</script>
<style lang="less" scope>
.riskMonitoring {
    width: 100%;
    height: 100%;
    background-color: #ebeef3;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 50px;
        background-color: #fff;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #999;
            font-size: 16px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #2269ff;
            font-size: 16px;
            border-bottom: 4px solid #2269ff;
        }
    }
    .queryDiv {
        width: 100%;
        background-color: #fff;
        margin-top: 10px;
        .queryDiv_top {
            width: 100%;
            padding-bottom: 1px;
            background-color: #fff;
            .ul11 {
                padding: 0 10px;
                li {
                    padding: 10px 0;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    font-size: 16px;
                    display: flex;
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 14px;
                        right: 0px;
                    }
                    .spa {
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 140px;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        color: #333;
                    }
                    em {
                        float: right;
                        color: #999;
                        width: 200px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        margin-right: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        div {
                            float: right;
                            margin-left: 20px;
                            width: 26%;
                            position: relative;
                            text-align: right;
                            color: #999;
                            input {
                                width: 16px;
                                height: 16px;
                                position: absolute;
                                top: 6px;
                                left: 10px;
                                text-align: center;
                            }
                        }
                    }
                    .vux-datetime {
                        width: 200px !important;
                        text-align: right;
                        color: #999;
                        font-size: 12px;
                        padding: 0;
                    }
                    .vux-cell-value {
                        color: #999;
                        font-size: 14px;
                        padding-right: 6px;
                    }
                }
            }
            .queryBtn {
                height: 40px;
                line-height: 40px;
                left: 40px;
                margin: 25px auto;
                text-align: center;
                width: 200px;
                border-radius: 25px;
                background-color: #2269ff;
                letter-spacing: 4px;
                color: #fff;
            }
        }
    }
    h2 {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: right;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .destail {
        width: 100%;
        background-color: #fff;
        li {
            width: 100%;
            height: 54px;
            line-height: 54px;
            padding-left: 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            p {
                height: 54px;
                line-height: 54px;
                width: 270px;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #666;
                font-size: 14px;
            }
            em {
                width: 60px;
                float: left;
                text-align: right;
                font-size: 14px;
                color: #999;
            }
            .vux-x-icon {
                fill: #666;
                float: right;
                width: 20px;
                height: 20px;
                // margin: 16px;
                margin: 17px 0 0;
            }
        }
    }
    .weui-actionsheet {
        top: 30%;
        // width: 90%;
        // left: 20px;
        background-color: rgba(0, 0, 0, 0);
    }
    .weui-actionsheet__menu {
        margin: 0 auto;
        width: 80%;
        // height: 200px;
        overflow-y: auto;
        line-height: 20px;
        border-radius: 10px;
    }
    .vux-actionsheet-menu-default {
        padding: 20px 20px !important;
        text-align: left;
        font-size: 16px;
    }
    .noDestail {
        background-color: #fff;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
    }
    .weui-cell:before {
        border-top: 0;
    }
    .weui-cell {
        padding: 0;
        height: 28px;
        z-index: 999999;
        width: 259px;
        height: 28px;
    }
    .vux-cell-value {
        float: right;
        width: 180px;
        // background-color: pink;
        height: 28px;
        font-size: 12px;
        text-align: right;
        color: #000;
    }
    .weui-cell_access .weui-cell__ft:after {
        top: 46%;
        width: 8px;
        height: 8px;
        content: 0;
    }
    .vux-datetime .weui-cell .weui-cell_access {
        width: 259px;
        height: 28px;
    }
    .green {
        color: orange;
    }
    .red {
        color: red;
    }
    .hui {
        color: #999;
    }
    .vux-cell-primary {
        // margin-right: 10px;
        height: 28px;
        line-height: 31px;
    }
}
</style>
<style>
.riskMonitoring .weui-cell_access .weui-cell__ft {
    padding-right: 0;
}
.riskMonitoring .weui-cell_access .weui-cell__ft:after {
    display: none;
}
</style>
